<template>
  <div class="echartsWeb">
    <div class="echarts" id="barometer-line"></div>
  </div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
import {
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  DataZoomComponent,
  //   MarkLineComponent,
} from "echarts/components";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
echarts.use([
  LineChart,
  VisualMapComponent,
  TooltipComponent,
  GridComponent,
  UniversalTransition,
  CanvasRenderer,
  DataZoomComponent,
  //   MarkLineComponent,
]);
export default {
  props: {
    linedata: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {},
  watch: {
    linedata: {
      handler(val) {
        if (val) {
          this.chartDes();
          this.lineCharts();
        }
      },
      deep: true,
      immediate: false,
    },
  },
  beforeDestroy() {
    this.chartDes();
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    lineCharts() {
      // console.log(this.linedata, "line");
      let options = {
        // title: {
        //   text: 'Beijing AQI',
        //   left: '1%'
        // },
        tooltip: {
          trigger: "axis",
          textStyle: {
            // fontSize: 30, // 字体大小
          },
          // axisPointer: {
          //   type: "shadow",
          // },
        },
        grid: {
          left: "8%",
          right: "8%",
          bottom: "15%",
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              // color: "#000000", // 坐标轴文字颜色
              // fontSize: 16, // 坐标轴文字大小
            },
          },
          data:
            Object.keys(this.linedata).length > 0
              ? this.linedata.xaxisData
              : [
                  "立春",
                  "雨水",
                  "惊蛰",
                  "春分",
                  "清明",
                  "谷雨",
                  "立夏",
                  "小满",
                  "芒种",
                  "夏至",
                  "小暑",
                  "大暑",
                  "立秋",
                  "处暑",
                  "白露",
                  "秋分",
                  "寒露",
                  "霜降",
                  "立冬",
                  "小雪",
                  "大雪",
                  "冬至",
                  "小寒",
                  "大寒",
                ],
          // data: data.map(function (item) {
          //   return item[0];
          // })
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              // color: "#000000", // 坐标轴文字颜色
              fontSize: 16, // 坐标轴文字大小
            },
          },
        },
        // 工具盒
        // toolbox: {
        //   right: 10,
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: 'none'
        //     },
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        // dataZoom: {
        //   type: "slider", // slider  inside
        //   show: true,
        //   zoomLock: false, // 如果设置为 true 只能平移，不能缩放
        //   // xAxisIndex: [0], // 控制哪个X轴 多个X轴的时候生效
        //   // bottom: -5, // slider生效
        //   start: 0,
        //   end: 100, //初始化滚动条
        // },
        visualMap: {
          left: "right",
          top: 20,
          textStyle: {
            color: "#000000",
          },
          pieces: [
            {
              gt: 300,
              lte: 1000,
              color: "#002D11",
            },
            {
              gt: 200,
              lte: 300,
              color: "#003D17",
            },
            {
              gt: 150,
              lte: 200,
              color: "#0F6329",
            },
            {
              gt: 100,
              lte: 150,
              color: "#2AA54E",
            },
            {
              gt: 50,
              lte: 100,
              color: "#4AC26B",
            },
            {
              gt: 0,
              lte: 50,
              color: "#ABEEBB",
            },
          ],
          outOfRange: {
            color: "#999",
          },
        },
        series: {
          name:
            Object.keys(this.linedata).length > 0
              ? this.linedata.name
              : "节气能耗表",
          type: "line",
          tooltip: {
            valueFormatter: function (value) {
              return value + " kgce";
            },
          },
          data:
            Object.keys(this.linedata).length > 0
              ? this.linedata.seriesData.length > 0
                ? this.linedata.seriesData
                : [
                    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                    0, 0, 0, 0,
                  ]
              : [
                  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                  0, 0, 0,
                ],
          // data: data.map(function (item) {
          //   return item[1];
          // }),
          //   markLine: {
          //     silent: true,
          //     lineStyle: {
          //       color: "#333",
          //     },
          //     data: [
          //       {
          //         yAxis: 50,
          //       },
          //       {
          //         yAxis: 100,
          //       },
          //       {
          //         yAxis: 150,
          //       },
          //       {
          //         yAxis: 200,
          //       },
          //       {
          //         yAxis: 300,
          //       },
          //     ],
          //   },
        },
      };
      this.initChart("barometer-line", options);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
    },
  },
};
</script>
<style scoped lang="scss">
.echartsWeb {
  width: 100%;
  height: 210px;
  //   width: 679px;
  //   height: 195px;
  //   padding-left: 39px;
  //   box-sizing: border-box;
  //   position: relative;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
